<template>
  <div>
    <a-spin tip="Loading..." :spinning="isLoading">
      <div class="title">
        通用办公设备家具购置申请表
      </div>
      <div class="container">
        <div v-for="(value, key, index) in headerList" :key="index">
          <div
            class="listWrap"
            v-if="key.indexOf('新增资产配置原因及依据') === -1"
          >
            <div class="leftClass">
              {{ key }}
            </div>
            <div class="middleClass"></div>
            <div class="rightClass">
              {{ value }}
            </div>
          </div>
          <div v-else class="specialStyle">
            <div>
              {{ key }}
            </div>
            <div class="specialContent">
              {{ value }}
            </div>
          </div>
        </div>
      </div>

      <div class="bodyList">
        <div class="bodyHeader">
          资产品目
        </div>
        <div class="bodyContent">
          <div v-for="(item, index) in bodyList" :key="index">
            <div class="bodyClass">{{ index + 1 }}.{{ item.assetName }}:</div>
            <div
              class="bodyTitle"
              :key="index"
              v-for="(item1, index) in bodyMapper"
            >
              <div v-if="item1.children">
                <div>
                  {{ item1.name }}
                </div>
                <div
                  :key="index"
                  v-for="(value, key, index) in item1.children"
                  class="listWrap"
                  style="border:none;padding:1px 0px;"
                >
                  <div
                    class="leftClass"
                    style="color: #999999;font-size: 15px;"
                  >
                    {{ value }}
                  </div>
                  <div class="middleClass"></div>
                  <div class="rightClass">
                    {{ item[key] }}
                  </div>
                </div>
              </div>
              <div v-else>
                <div class="listWrap" style="padding:5px 0px;">
                  <div class="leftClass" style="font-size: 15px;">
                    {{ item1.name }}
                  </div>
                  <div class="middleClass"></div>
                  <div class="rightClass">
                    {{ item[item1.filed] }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
/*eslint-disable*/
import { getCommonData } from "@/api/table/index.js";
import loadingType from '@/views/DetailPage/mixinsloadingtype'

export default {
  data() {
    return {
      isLoading: false,
      headerList: {},
      bodyList: [],
      bodyMapper: [
        {
          name: "标准内可配置情况",
          children: {
            arrangeMoney: "单位",
            arrangeCount: "数量",
          },
        },
        {
          name: "单位申报数",
          children: {
            applyMoney: "单位",
            applyCount: "数量",
          },
        },
        {
          name: "现有数量",
          filed: "nowCount",
        },
        {
          name: "已申报处置数",
          filed: "quitCount",
        },
        {
          name: "面积(㎡)",
          filed: "area",
        },
        {
          name: "备注(请注明存放地点、用途等)",
          filed: "remark",
        },
      ],
    };
  },
  mixins:[loadingType],
  created() {
    // 获取资产购置申请表的数据
    // this.isLoading = true;
    this.$emit("loadingType", true);

    getCommonData("/equipBuy/findByFormGuid", {
      formGuid: this.$route.query.formGuid,
    }).then((res) => {
      // this.isLoading = false;
      // this.$emit("loadingType", false);
      this.dataLoadingType = false;
      this.headLoadingType = false;
      if (res.success) {
        this.headerList = {
          "单位名称:": res.data.enterpriseId + " " + res.data.enterpriseName,
          "申报日期:": res.data.applyDate,
          "经办人:": res.data.agent,
          "联系电话:": res.data.phone,
          "单位编制人数:": res.data.enterCount,
          "单位在职人数:": res.data.enterOnCount,
          "处级人数:": res.data.mainCount,
          "科级及以下人数:": res.data.mainUnderCount,
          "新增资产配置原因及依据:": res.data.reason,
        };

        this.bodyList = res.data.list;
      } else {
        this.headerList = {};
        this.bodyList = [];
      }
    });
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 26px;
  padding: 10px;
}

.bodyHeader {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  border-bottom: 1px solid #e0d9d9;
}

.bodyContent {
  font-size: 16px;
  color: #999999;
  line-height: 40px;
}

.bodyTitle {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #292828;
  line-height: 24px;
  margin-top: 15px;
}

.bodyClass {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bolder;
  color: #656363;
  border-bottom: 1px solid #e0d9d9;
  padding: 5px 0px;
  align-items: center;
}

.bodyList {
  margin-top: 5px;
  padding: 5px 10px;
  background: #fff;
  margin: 8px 0px;
  font-family: PingFangSC-Medium, PingFang SC;
}

.container {
  margin-top: 5px;
  padding: 5px 10px;
  background: #fff;
  margin: 8px 0px;
}

.specialStyle {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  padding: 10px 0px;
  align-items: center;
}

.specialContent {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  padding-right: 5px;
  line-height: 25px;
  word-wrap: break-word;
  word-break: break-all;
  margin-top: 10px;
  padding: 0px 10px;
}

.listWrap {
  display: flex;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  border-bottom: 1px solid #e0d9d9;
  padding: 10px 0px;
  align-items: center;
}

.leftClass {
  flex: 1.1;
  text-align: left;
}

.middleClass {
  flex: 0.5;
}

.rightClass {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  flex: 2;
  text-align: right;
  padding-right: 5px;
  line-height: 25px;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
